<template>

    <Form ref="formValidate" :model="formValidate" :label-width="80" :rules="ruleValidate" style="position: relative;"> 
        <FormItem label="上下学距离">
            <div>
                <InputNumber :min="0" v-model="formValidate.distance"></InputNumber>KM
            </div>
        </FormItem>
        <FormItem label="上下学交通方式" prop="traffic_release_id">
            <Select v-model="formValidate.traffic_release_id" style="width:80%" transfer clearable> 
                <Option  v-for="item in listDictionary.traffic_release" :value="item.dictionary_id" :key="item.dictionary_id">{{item.dictionary_name.zh?item.dictionary_name.zh:item.dictionary_name.mn}}</Option>                             
            </Select>
        </FormItem>
        <FormItem label="是否乘坐校车" prop="is_school_bus">
            <Select v-model="formValidate.is_school_bus" style="width:80%" transfer clearable>
                <Option :value="0" :key="0">否</Option>  
                <Option :value="1" :key="1">是</Option>            
            </Select>
        </FormItem>
        <FormItem style="width:90%;">
            <Button type="primary" @click="handleSubmit('formValidate')">保存</Button>
        </FormItem>   
        <div style="clear:both"></div>
        <Spin size="large" fix v-if="spinShow"></Spin>                     
    </Form> 
</template>
<script>
export default {
    props: {
        infoOld: {
            type: [Boolean,Number,Object,Array],
            default: false
        },
        typeother: {
            type: [Boolean,String],
            default: false
        }
    },
    data() {
        return {
            infoUrl:`api/student/v1/studenttraffic/lists/${this.infoOld.traffic?this.infoOld.traffic.student_traffic_id : ''}`,//请求单条数据
            saveUrl:'',//保存接口
            saveType:null,//保存方式
            
            // 数据字典获取数据  血型
            listDictionary:{
                traffic_release:[]
            },
            spinShow:false,       
            
            infoOldObj:null,// 个人辅助数据
            

            // 个人辅助信息
            formValidate: {
                traffic_release_id: null,//上下学交通方式
                is_school_bus:1,//是否乘坐校车
                distance:0,//上下学距离  
                user_id:this.infoOld.user_id,            
            },
            ruleValidate: {
                is_school_bus: [
                    { type:'number',required: true, message: '请选择是否乘坐校车', trigger: 'change' }
                ],
            },
        }
    },
    methods: {
        
        /************************************************************
         * 
         * 单条获取个人辅助信息
         * 
         ************************************************************/
        infoData(){
            this.spinShow=true
            this.$http.get(this.infoUrl).then(val=>{ 
                this.infoOldObj = JSON.parse(JSON.stringify(val.data))

                this.formValidate.traffic_release_id = parseInt(this.infoOldObj.traffic_release_id)//用于默认选的 上下学交通方式
                this.formValidate.is_school_bus = parseInt(this.infoOldObj.is_school_bus)//用于默认选的  是否乘坐校车
                this.formValidate.distance = this.infoOldObj.distance// 上下学距离

                this.spinShow=false
            }).catch(err=>{
                console.log(err);
                if(err.code && err.code==422) {
                    this.$Message.error(err.message);
                }
                this.spinShow=false
            })
        },
        
        /************************************************************
         * 
         * 个人辅助信息提交
         * 
         ************************************************************/
        handleSubmit (name) {
            this.$refs[name].validate((valid) => {
                if (valid) {   
                    this.spinShow=true    
                    this.saveType(this.saveUrl,this.formValidate)
                    .then(val=>{
                        this.$Message.success(val.message);
                        this.$emit('expandback',true)
                        this.spinShow=false
                    }) 
                    .catch(err=>{
                        console.log(err);
                        if(err.code && err.code==422) {
                            this.$Message.error(err.message);
                        }
                        this.spinShow=false
                    })
                } else {
                    this.$Message.error("表单验证失败!");
                }    
            })
        },
        

        /************************************************************
         * 
         * 数据字典获取数据
         * 
         ************************************************************/
        listDictionaryFun(){
            this.spinShow=true
            this.$http.get('api/dictionary/v1/dictionary/pidquerys?traffic_release')
            .then((response) => {
                this.listDictionary=response.data
                this.spinShow=false
            })
            .catch(err=>{
                console.log(err);
                if(err.code && err.code==422) {
                    this.$Message.error(err.message);
                }
                this.spinShow=false
            })
        },
    },
    created() {
        this.listDictionaryFun()
        
        if(this.infoOld.traffic){
            // 如果有值 就是修改
            this.infoData()
            this.saveUrl=`api/student/v1/studenttraffic/update/${this.infoOld.traffic.student_traffic_id}`
            this.saveType=this.$http.put
        }else{
            // 如果没有有值 就是添加  
            this.saveUrl='api/student/v1/studenttraffic/create'
            this.saveType=this.$http.post
        }
        
    },    
    watch:{
        infoOld: {
            handler (val) {
                if(this.infoOld.traffic){
                    // 如果有值 就是修改
                    // this.infoUrl=`api/student/v1/studenttraffic/lists/${this.infoOld.traffic?this.infoOld.traffic.student_traffic_id : ''}`,//请求单条数据
                    // this.infoData()
                    this.saveUrl=`api/student/v1/studenttraffic/update/${this.infoOld.traffic.student_traffic_id}`
                    this.saveType=this.$http.put
                }else{
                    // 如果没有有值 就是添加  
                    this.saveUrl='api/student/v1/studenttraffic/create'
                    this.saveType=this.$http.post
                }
            }
        },
    },

}

</script>